<template>
    <el-dialog :model-value="showLinkDialog" width="900" :close-on-click-modal="false" @close="closeDialog">
        <template #header>
            <p style="color: black; font-weight: bold">链接选择器</p>
        </template>
        <div class="line"></div>
        <div v-loading="linkLoading" class="dialog-content">
            <el-tabs v-model="activeName" tab-position="left">
                <el-tab-pane label="基础页面" name="1">
                    <div v-for="(item, index) in linkTypeData" :key="index">
                        <div style="color: #000; margin-bottom: 10px; font-weight: bold">{{ item.name }}</div>
                        <div class="link-list">
                            <div class="link-item" v-for="(link, linkIndex) in item.children" :key="linkIndex"
                                :class="{ active: selectedId === link.id }" @click="handleSelectLink(link)">
                                {{ link.name }}
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="考试专栏" name="6">
                    <div class="link-list">
                        <div class="link-item" v-for="(group, linkIndex) in examTableData" :key="linkIndex"
                            :class="{ active: activeGroup === group.pageUrlType }" @click="handleSelectGroup(group)">
                            {{ group.name }}
                        </div>
                    </div>
                </el-tab-pane>
                <!-- <el-tab-pane label="自定义页面" name="2">
                    <el-table :data="customData" @row-click="handleSelectLink">
                        <el-table-column prop="name" label="页面名称" />
                        <el-table-column prop="name" label="页面类型">
                            <template #default> 自定义页面 </template>
                        </el-table-column>
                        <el-table-column prop="updateTime" label="修改时间" />
                        <el-table-column prop="name" label="操作">
                            <template #default="scope">
                                <div class="select-button" :class="{ active: scope.row.id === selectCustomId }"
                                    @click="setActive(scope.row.id)">
                                    {{ scope.row.id === selectCustomId ? '已选' : '选择' }}
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="拨打电话" name="4">
                    <div style="display: flex; align-items: center">
                        <p>手机号:</p>
                        <el-input v-model.trim="linkPhone" style="width: 500px; margin-left: 20px"
                            placeholder="请输入手机号"></el-input>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="H5跳转" name="3">
                    <div style="display: flex; align-items: center">
                        <p>网页URL:</p>
                        <el-input style="width: 500px; margin-left: 20px"></el-input>
                    </div>
                    <p style="margin-left: 90px; margin-top: 20px">需https://开头，小程序需设置业务域名</p>
                </el-tab-pane>
                <el-tab-pane label="小程序跳转" name="5">
                    <el-form label-width="120px" label-position="right">
                        <el-form-item label="小程序APP ID：">
                            <el-input></el-input>
                        </el-form-item>
                        <el-form-item label="小程序路径：">
                            <el-input></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane> -->
            </el-tabs>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="closeDialog" style="margin-right: 6px">关闭</el-button>
                <el-button type="primary" @click="handleConfirm">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
const props = defineProps({
    showLinkDialog: {
        type: Boolean,
        default: false
    },
    linkType: {
        type: String
    }
})

interface linkItem {
    id: string
    name: string
    type?: string
    routePath: string
    pageUrlType?: string
    children: linkItem[]
}

const emit = defineEmits(['closeDialog'])

const basePageData = ref([
    {
        id: '4002',
        name: '首页',
        pageType: 'tabBar',
        routePath: 'pages/drivingSchool/drive',
        children: [],
        type: 1
    },
    {
        id: '4009',
        name: '考试答题页',
        pageType: 'tabBar',
        routePath: 'pages/exam/exam',
        children: [],
        type: 1
    },
    {
        id: '4021',
        name: '会员卡',
        pageType: 'tabBar',
        routePath: 'pages/exam/vipCourse',
        children: [],
        type: 1
    },
    {
        id: '4035',
        name: '我的成绩',
        pageType: 'tabBar',
        routePath: 'pages/exam/myGrades',
        pageUrlType: '12',
        children: [],
        type: 1
    },
    {
        id: '4039',
        name: '我的优惠卷',
        pageType: 'custom',
        routePath: 'pages/user/components/coupon',
        children: [],
        type: 1
    },
    {
        id: '4003',
        name: '个人中心',
        pageType: 'tabBar',
        routePath: 'pages/user/user',
        children: [],
        type: 1
    },
    {
        id: '4005',
        pageType: 'custom',
        name: '用户设置',
        routePath: 'pages/user/components/setting',
        children: [],
        type: 1
    },
    {
        id: '4034',
        name: '班型订单',
        pageType: 'custom',
        routePath: 'pages/order/packageOrder',
        children: [],
        type: 1
    },
    {
        id: '4037',
        name: '会员订单',
        pageType: 'custom',
        routePath: 'pages/order/vipOrder',
        children: [],
        type: 1
    },
    {
        id: '4031',
        name: '车型切换',
        pageType: 'custom',
        routePath: 'pages/carType/list',
        children: [],
        type: 1
    },
    {
        id: '4010',
        name: '关于我们',
        pageType: 'custom',
        routePath: 'pages/user/components/about',
        children: [],
        type: 2
    },
    {
        id: '4033',
        name: '联系我们',
        pageType: 'custom',
        routePath: 'pages/user/components/contact',
        children: [],
        type: 2
    },
    {
        id: '4015',
        name: '在线客服',
        pageType: 'customer',
        routePath: '',
        children: [],
        type: 2
    },
    {
        id: '4004',
        pageType: 'custom',
        name: '帮助中心',
        routePath: 'pages/user/components/helpCenter',
        children: [],
        type: 2
    },
    {
        id: '4016',
        name: '驾校简介',
        pageType: 'custom',
        routePath: 'pages/customPage/index',
        children: [],
        type: 3
    },
    {
        id: '4017',
        name: '驾校导航',
        pageType: 'map',
        routePath: '',
        children: [],
        type: 3
    },
    {
        id: '4018',
        name: '班型列表',
        pageType: 'custom',
        routePath: 'pages/classDetail/classList',
        children: [],
        type: 3
    },
    {
        id: '4019',
        name: '教练列表',
        pageType: 'custom',
        routePath: 'pages/coach/index',
        children: [],
        type: 3
    },
    {
        id: '4020',
        name: '场地列表',
        pageType: 'custom',
        routePath: 'pages/trainingGroundDetail/index',
        children: [],
        type: 3
    },
    {
        id: '4022',
        name: '领卷中心',
        pageType: 'custom',
        routePath: 'pages/coupon/list',
        children: [],
        type: 4
    },
    {
        id: '4023',
        name: '分销中心',
        pageType: 'custom',
        routePath: 'pages/distribution/index',
        children: [],
        type: 4
    },
    {
        id: '4032',
        name: '兑换码',
        pageType: 'custom',
        routePath: 'pages/user/components/redemptionCode',
        children: [],
        type: 4
    },
    // {
    //   id: '4024',
    //   name: '视频课程详情',
    //   pageType: 'custom',
    //   routePath: 'pages/videoCourse/index',
    //   children: []
    // },
    {
        id: '4025',
        name: '如何约考',
        pageType: 'custom',
        routePath: 'pages/examRelated/scheduleExam',
        children: [],
        type: 3
    },
    {
        id: '4026',
        name: '如何查成绩',
        pageType: 'custom',
        routePath: 'pages/examRelated/checkGrades',
        children: [],
        type: 3
    },
    {
        id: '4027',
        name: '考试简介',
        pageType: 'custom',
        routePath: 'pages/examRelated/examSubjectMaterials',
        pageUrlType: '01',
        children: [],
        type: 3
    },
    {
        id: '4028',
        name: '考试流程',
        pageType: 'custom',
        routePath: 'pages/examRelated/examSubjectMaterials',
        pageUrlType: '02',
        children: [],
        type: 3
    },
    {
        id: '4029',
        name: '考试准备',
        pageType: 'custom',
        routePath: 'pages/examRelated/examSubjectMaterials',
        pageUrlType: '03',
        children: [],
        type: 3
    },
    {
        id: '4030',
        name: '注意事项',
        pageType: 'custom',
        routePath: 'pages/examRelated/examSubjectMaterials',
        pageUrlType: '04',
        children: [],
        type: 3
    },
    {
        id: '4036',
        name: '图文列表',
        pageType: 'custom',
        routePath: 'pages/imageText/list',
        children: [],
        type: 1
    }
])

const customData = ref([
    {
        id: 1,
        name: '未命名页面1',
        pageType: 'custom',
        routePath: 'pages/user/user',
        updateTime: '2025-07-23'
    },
    {
        id: 2,
        name: '未命名页面2',
        pageType: 'custom',
        routePath: 'pages/user/user',
        updateTime: '2025-07-23'
    }
])

const examTableData = ref([
    {
        name: '精选题库',
        pageType: 'custom',
        pageUrlType: '01',
        routePath: 'pages/exam/components/featuredQuestion'
    },
    {
        name: 'Vip课程',
        pageType: 'tabBar',
        pageUrlType: '02',
        routePath: 'pages/exam/vipCourse'
    },
    // {
    //   name: '视频课程管理',
    //   pageType: 'custom',
    //   pageUrlType: '02',
    //   routePath: 'pages/exam/components/vipCourse'
    // },
    {
        name: '模拟考试',
        pageType: 'custom',
        pageUrlType: '03'
    },
    {
        name: '技巧刷题',
        pageType: 'custom',
        pageUrlType: '04'
    },
    {
        name: '专项练习',
        pageType: 'custom',
        pageUrlType: '05',
        routePath: 'pages/exam/components/specializedExercises'
    },
    {
        name: '章节练习',
        pageType: 'custom',
        pageUrlType: '06',
        routePath: 'pages/exam/components/stageByStagePractice'
    },
    {
        name: '考前密卷',
        pageType: 'custom',
        pageUrlType: '07',
        routePath: 'pages/exam/components/secretPapers'
    },
    {
        name: '图标技巧',
        pageType: 'custom',
        pageUrlType: '08',
        routePath: 'pages/exam/components/iconSkills'
    },
    {
        name: '三力考试',
        pageType: 'custom',
        pageUrlType: '09'
    },
    {
        name: '错题收藏',
        pageType: 'custom',
        pageUrlType: '10',
        routePath: 'pages/exam/components/errorBook'
    },
    {
        name: '真实考场',
        pageType: 'custom',
        pageUrlType: '11',
        routePath: 'pages/realExam/index'
    },
    {
        name: '我的成绩',
        pageType: 'tabBar',
        routePath: 'pages/exam/myGrades',
        pageUrlType: '12'
    }
])

const linkLoading = ref(false)
const selectedId = ref('4001')
const selectLinkData = ref()
const activeName = ref('1')
const selectCustomId = ref()
const activeGroup = ref()
const linkPhone = ref()

const linkTypeData = ref<any[]>([])

function groupBy<T extends Record<string, any>, K extends keyof T>(
    objectArray: T[],
    property: K
): Record<string, T[]> {
    return objectArray.reduce(
        (acc, obj) => {
            const key = String(obj[property])
            const curGroup = acc[key] ?? []
            return { ...acc, [key]: [...curGroup, obj] }
        },
        {} as Record<string, T[]>
    )
}

function handleSelectLink(item: linkItem) {
    selectedId.value = item.id
    selectLinkData.value = item
}

function closeDialog() {
    emit('closeDialog')
}

function handleConfirm() {
    if (activeName.value === '4') {
        let obj = {
            name: `tel: ${linkPhone.value}`,
            pageType: 'phone',
            routePath: linkPhone.value
        }
        emit('closeDialog', obj)
        return
    }
    emit('closeDialog', selectLinkData.value)
}

function handleSelectGroup(item: any) {
    activeGroup.value = item.pageUrlType
    selectLinkData.value = item
}

function setActive(id: any) {
    if (selectCustomId.value === id) {
        selectCustomId.value = ''
    } else {
        selectCustomId.value = id
    }
}

onMounted(() => {
    const groupData = groupBy(basePageData.value, 'type')
    for (let key in groupData) {
        let obj: any = {
            1: '基础功能',
            2: '系统设置',
            3: '驾校专栏',
            4: '营销功能'
        }
        linkTypeData.value.push({
            name: obj[key],
            children: groupData[key]
        })
    }
})
</script>

<style scoped lang="scss">
.link-list {
    display: flex;
    flex-wrap: wrap;

    .link-item {
        border: 1px solid #f4f5f8;
        border-radius: 12px;
        padding: 10px 0;
        margin: 0 16px 16px 0;
        color: black;
        font-size: 14px;
        font-weight: normal;
        line-height: 20px;
        cursor: pointer;
        width: 120px;
        text-align: center;

        &:hover {
            border: 1px solid var(--el-color-primary);
        }
    }

    .link-item.active {
        background-color: var(--el-color-primary);
        color: #fff;
    }
}

.select-button {
    display: inline-block;
    padding: 6px 24px;
    border: 1px solid var(--el-color-primary);
    border-radius: 12px;
    color: var(--el-color-primary);
    background-color: #fff;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
}

.select-button.active {
    background-color: var(--el-color-primary);
    color: white;
}

.dialog-content {
    height: 500px;
    overflow: auto;
}

.line {
    height: 1px;
    width: 100%;
    background-color: #f0f0f0;
    margin-top: -20px;
    margin-bottom: 30px;
}
</style>